<template>
  <div class="page-container">
    <div id="mapContainer"></div>
    <div ref="amapInformationBox">
      <p>车辆信息框</p>
    </div>
  </div>

</template>

<script>
import loadAMap from '@/utils/loadAMap'
const carIcon = require('@/assets/images/car.png')
export default {
  components: {},
  name: 'aMap',
  data () {
    return {
      informationBox: null
    }
  },
  methods: {
    initMap () {
      loadAMap().then((AMap) => {
        this.map = new AMap.Map('mapContainer', {
          zoom: 13,
          center: [118.10, 24.49]
        })
        this.createMarker()
      })
    },
    // 创建点标记
    createMarker () {
      let marker = new window.AMap.Marker({
        icon: carIcon,
        imageSize: '5px',
        position: new window.AMap.LngLat(118.10, 24.49),
        offset: new window.AMap.Pixel(-13, -30),
        // 设置是否可以拖拽
        draggable: true,
        cursor: 'move',
        // 设置拖拽效果
        rainseOnDrag: true
      })
      marker.on('click', this.createInformationBox)
      this.map.add(marker)
    },
    // 创建信息框
    createInformationBox () {
      this.informationBox = new window.AMap.InfoWindow({
        content: this.$refs.amapInformationBox
      })
      this.informationBox.open(this.map, [118.10, 24.49])
    }
  },
  beforeMount () {
    this.initMap()
  }
}
</script>
<style lang='less' scoped>
.page-container {
  height: 100%;
}
#mapContainer {
  width: 100%;
  height: 100%;
}
</style>
